<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        table {
            width: 500px;
        }
        
        tr {
            border: 1px solid black;
        }
        
        th,
        td {
            width: 100px;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <div class="search">
        按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="searchp" onclick="select();">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="searchn">查询</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];

        function showall() {
            ($("tbody")).innerHTML = " ";
            for (var i = 0; i < data.length; i++) {
                var s = "<tr>";
                for (var key in data[i]) {
                    s += "<td>" + data[i][key] + "</td>"
                }
                s += "</tr>"
                $("tbody").append(s);
            }
        }
        var start;
        var end;
        var product;
        $(".start").mouseleave(function() {
            start = this.value;
            console.log(start);
        });
        $(".end").mouseleave(function() {
            end = this.value;
        });
        $(".product").mouseleave(function() {
            product = this.value;
        })

        function select() {
            console.log(start);
            var newDate = data.filter(function(value) {
                return value.price >= start && value.price <= end;
            });

            $("tbody").html(" ");
            for (var i = 0; i < newDate.length; i++) {
                var s = "<tr>";
                for (var key in newDate[i]) {
                    s += "<td>" + newDate[i][key] + "</td>"
                }
                s += "</tr>"
                $("tbody").append(s);
            }

        }

        $(".searchn").click(function() {
            var newDate = data.filter(function(value) {
                return value.pname == product;
            });
            $("tbody").html(" ");
            for (var i = 0; i < newDate.length; i++) {
                var s = "<tr>";
                for (var key in newDate[i]) {
                    s += "<td>" + newDate[i][key] + "</td>"
                }
                s += "</tr>"
                $("tbody").append(s);
            }

        })

        showall();
    </script>
</body>

</html>